import * as Echarts from "echarts";
import {WeatherAll} from "@/types/weather.ts";
import React, { useEffect } from "react";

function isToday(targetDate: Date): boolean {
    const today = new Date();
    return (
        today.getFullYear() === targetDate.getFullYear() &&
        today.getMonth() === targetDate.getMonth() &&
        today.getDate() === targetDate.getDate()
    );
}


export default function Chart({ data }: { data?: WeatherAll }) {
    useEffect(() => {
        if (!data) return;

        const chartDom = document.getElementById("chart");
        const myChart = Echarts.init(chartDom!);
        const forecasts = data.forecasts;

        const option = {
            xAxis: [
                {
                    type: "category",
                    data: forecasts.map((f) =>
                        isToday(new Date(f.date)) ? "今天" : f.week
                    ),
                    gridIndex: 0,
                    offset: 30,
                    position: "top",
                    axisLabel: {
                        show: true,
                        textStyle: {
                            fontSize: 11,
                            color: (value: string) => (value === "今天" ? "#1f6ebd" : "#000"),
                        },
                    },
                    axisLine: { show: false },
                    axisTick: { show: false },
                },
                {
                    type: "category",
                    data: forecasts.map((f) => f.text_day),  // 白昼天气现象
                    offset: 0,
                    position: "top",
                    axisLabel: {
                        show: true,
                        textStyle: { fontSize: 11 },
                        margin: 15,  // 防止与风向风力重叠
                    },
                    axisLine: { show: false },
                    axisTick: { show: false },
                },

                {
                    type: "category",
                    data: forecasts.map((f) => f.text_night),  // 夜间天气现象
                    offset: 0,
                    position: "bottom",
                    axisLabel: {
                        show: true,
                        textStyle: { fontSize: 11 },
                        margin: 20,  // 防止与风向风力重叠
                    },
                    axisLine: { show: false },
                    axisTick: { show: false },
                },
                {
                    type: "category",
                    data: forecasts.map((f) => `${f.wd_day}\n${f.wc_day}`), // 风向风力
                    offset: 0,
                    position: "bottom",
                    axisLabel: {
                        show: true,
                        textStyle: { fontSize: 11 },
                        margin: 40, // 与其他 x 轴有空间

                    },
                    axisLine: { show: false },
                    axisTick: { show: false },
                },
            ],
            yAxis: [
                {
                    type: "value",
                    show: false,
                    min: 0,
                    max: 35,
                },
                {
                    type: "value",
                    show: false,
                    min: 0,
                    max: 30,
                    offset: 20, // 控制位置
                }
            ],
            grid: {
                bottom: 85,
                containLabel: false,
            },
            tooltip: {
                trigger: "item",
                formatter: (params: any) => {
                    const val = params.value;
                    if (isNaN(val)) {
                        return ""; // 不显示 tooltip
                    }
                    const timePeriod = params.seriesName === "高温" ? "白天" : "夜间";
                    return `${timePeriod}温度: ${val}℃`;
                },
            },
            series: [
                {
                    name: "高温",
                    data: forecasts.map((f) => f.high),
                    clip: false, // 自动裁剪取消
                    type: "line",
                    symbol: "circle",
                    symbolSize: 8,
                    xAxisIndex: 0,
                    yAxisIndex: 0,
                    itemStyle: {
                        color: "#FFA500",
                    },
                    lineStyle: { color: "#FFA500", width: 1},
                    label: {
                        show: true,
                        position: "top",
                        distance: 5,
                        formatter: (params: any) => `${params.data}°C`,
                        fontSize: 11,
                        color: "#000",
                    },
                },

                {
                    name: "低温",
                    data: forecasts.map((f) => f.low),
                    clip: false, // 自动裁剪取消
                    type: "line",
                    symbol: "circle",
                    symbolSize: 8,
                    xAxisIndex: 0,
                    yAxisIndex: 1,
                    itemStyle: {
                        color: "#44CEF6",
                    },
                    lineStyle: { color: "#44CEF6", width: 1 },
                    label: {
                        show: true,
                        position: "bottom",
                        distance: 5,
                        formatter: (params: any) => `${params.data}°C`,
                        fontSize: 11,
                        color: "#000",
                    },
                }
            ],
        };

        myChart.setOption(option);
        myChart.resize()
        return () => myChart.dispose();
    }, [data]);

    return <div id="chart" style={chartStyles}></div>;
}

const chartStyles: React.CSSProperties = {
    height: "30vh",
    width: "100%",
};
